import $ from 'jquery'

function ComplexCustomOverlay(map, point, index, css = {}) {
  this.map = map;
  this.point = point;
  this.index = index;
  this.css = css
}

ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function () {
  var span = this.span = document.createElement("span");
  $(span).css({
    'position': 'absolute',
    'zIndex': BMap.Overlay.getZIndex(this.point.lat) + 999,
    'display': 'block',
    'width': '30px',
    'line-height': '30px',
    'color': '#FFF',
    'text-align': 'center',
    'background': '#f30',
    'border-radius': '50%',
    'point-events': 'none',
    ...this.css
  });

  this.span.innerHTML = this.index;
  this.map.getPanes().labelPane.appendChild(span);
  return span;
}

ComplexCustomOverlay.prototype.draw = function () {
  var pixel = this.map.pointToOverlayPixel(this.point);
  this.span.style.left = pixel.x + 'px';
  this.span.style.top = pixel.y + 'px';
}

export default ComplexCustomOverlay